<div [formGroup]="data.form">
    <div class="form-group row">
        <label for="callback-url"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="Full path of redirect URL. These protocols rely upon TLS in production.">
                info
            </i>
            Callback URL (*)
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="callback-url"
                   name="callback-url"
                   [ngClass]="{ 'invalid': hostFormValidated && callbackUrl.invalid }"
                   [formControlName]="'callbackUrl'"
                   required
                   pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$"
                   maxlength="2000" />
            <div class="text-muted">
                Tokens will be sent to this endpoint (you can configure more after initial setup).
            </div>
            <div *ngIf="hostFormValidated && callbackUrl.invalid && callbackUrl.errors['required']"
                 class="form-control-feedback text-danger">
                Field 'Callback URL' is required.
            </div>
            <div *ngIf="hostFormValidated && callbackUrl.invalid && callbackUrl.errors['pattern']"
                 class="form-control-feedback text-danger">
                Please enter a valid URL.
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="post-logout-url"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="Users can be returned to this URL after logout. These protocols rely upon TLS in production.">
                info
            </i>
            Post-logout URL
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="post-logout-url"
                   name="post-logout-url"
                   [ngClass]="{ 'invalid': hostFormValidated && postLogoutUrl.invalid }"
                   [formControlName]="'postLogoutUrl'"
                   pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$"
                   maxlength="2000" />
            <div class="text-muted">Optional (you can configure more after initial setup).</div>
            <div *ngIf="hostFormValidated && postLogoutUrl.invalid && postLogoutUrl.errors['pattern']"
                 class="form-control-feedback text-danger">
                Please enter a valid URL.
            </div>
        </div>
    </div>
</div>